<template>
  <div class="page-container" ref="page">
    <iframe class="iframe" ref="refPanel" frameborder="0" id="bdIframe" />
  </div>
</template>

<script>
import { accessTicketApi } from '@api/tarot'
import { watch } from 'v-charts/lib/core'
export default {
  components: {},
  props: {},
  data() {
    return {
      url: ''
    }
  },
  created() {
    this.fetchData()
    this.changeFrameHeight()
  },
  mounted() {
    this.handleIframe()
    window.addEventListener('resize', () => {
      this.handleIframe(this.$store.state.app.sidebar.opened)
    })
  },
  methods: {
    // 获取数据
    fetchData() {
      accessTicketApi(this.param).then(res => {
        console.log(res.data.accessTicket)
        this.url =
          'https://bi.aliyun.com/token3rd/dashboard/view/pc.htm?pageId=' +
          res.data.worksId +
          '&accessTicket=' +
          res.data.accessTicket
        this.$refs.refPanel.src = this.url
      })
    },

    //  iframe-宽高自适应显示
    handleIframe(val) {
      console.log(val, typeof val)
      const oIframe = document.getElementById('bdIframe')
      let deviceWidth = document.documentElement.clientWidth - 200
      if (val == false) {
        deviceWidth = document.documentElement.clientWidth - 60
      }
      const deviceHeight = document.documentElement.clientHeight
      //数字是页面布局宽度差值
      oIframe.style.width = Number(deviceWidth) + 'px'
      oIframe.style.height = Number(deviceHeight) + 'px' //数字是页面布局高度差
    }
  },
  watch: {
    '$store.state.app.sidebar.opened': {
      handler(newVal) {
        console.log(newVal, typeof newVal)
        this.handleIframe(newVal)
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  background-color: #19082c;
}
</style>
